<template>
  <el-card>
    <div
      style="margin-bottom:20px;width:100%;text-align: left;display: flex;flex-direction: row;justify-content: space-between;">
      <div>
        <el-select v-model="params.history_no" placeholder="请选择存档号" style="width:300px;">
          <el-option
            v-for="item in historyNoList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <el-radio-group style="text-align: right;" v-model="sortType" @change="changeSortType">
        <el-radio-button label="默认正序"></el-radio-button>
        <el-radio-button label="净利润倒序"></el-radio-button>
        <el-radio-button label="所需材料价值倒序"></el-radio-button>
        <el-radio-button label="市场价倒序"></el-radio-button>
        <el-radio-button label="每元气值利润倒序"></el-radio-button>
      </el-radio-group>
    </div>
    <hr/>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="锻造" name="forge">
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio1" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="青云门武器"></el-radio-button>
            <el-radio-button label="鬼王宗武器"></el-radio-button>
            <el-radio-button label="合欢派武器"></el-radio-button>
            <el-radio-button label="焚香谷武器"></el-radio-button>
            <el-radio-button label="灵汐阁武器"></el-radio-button>
            <el-radio-button label="鬼王宗头脚上手腰"></el-radio-button>
            <el-radio-button label="合欢派头脚上手腰"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="消耗品"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success">{{scope.row.profit}}</el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info">{{scope.row.profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.net_profit > 2000" type="success">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else-if="scope.row.net_profit >= 0" type="info">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.net_profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.rate > 2000" type="success">{{scope.row.rate}}</el-tag>
              <el-tag v-else-if="scope.row.rate >= 0" type="info">{{scope.row.rate}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.rate}}</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="缝纫" name="sew">
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio2" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="包裹"></el-radio-button>
            <el-radio-button label="青云门头脚上手腰"></el-radio-button>
            <el-radio-button label="焚香谷头脚上手腰"></el-radio-button>
            <el-radio-button label="灵汐阁头脚上手腰"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="消耗品"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success">{{scope.row.profit}}</el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info">{{scope.row.profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.net_profit > 2000" type="success">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else-if="scope.row.net_profit >= 0" type="info">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.net_profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.rate > 2000" type="success">{{scope.row.rate}}</el-tag>
              <el-tag v-else-if="scope.row.rate >= 0" type="info">{{scope.row.rate}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.rate}}</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="炼药" name="alchemy">
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio3" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="丹药"></el-radio-button>
            <el-radio-button label="灵药"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success">{{scope.row.profit}}</el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info">{{scope.row.profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.net_profit > 2000" type="success">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else-if="scope.row.net_profit >= 0" type="info">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.net_profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.rate > 2000" type="success">{{scope.row.rate}}</el-tag>
              <el-tag v-else-if="scope.row.rate >= 0" type="info">{{scope.row.rate}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.rate}}</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="烹饪" name="cooking">
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio4" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="烹饪"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="帮派相关"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success">{{scope.row.profit}}</el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info">{{scope.row.profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.net_profit > 2000" type="success">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else-if="scope.row.net_profit >= 0" type="info">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.net_profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.rate > 2000" type="success">{{scope.row.rate}}</el-tag>
              <el-tag v-else-if="scope.row.rate >= 0" type="info">{{scope.row.rate}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.rate}}</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
      <el-tab-pane label="雕刻" name="engrave">
        <div style="margin:10px 0 10px 0;width:100%;text-align: left;">
          <el-radio-group v-model="radio5" @change="changeRadio">
            <el-radio-button label="全部"></el-radio-button>
            <el-radio-button label="护符"></el-radio-button>
            <el-radio-button label="法印"></el-radio-button>
            <el-radio-button label="令牌"></el-radio-button>
            <el-radio-button label="礼物"></el-radio-button>
            <el-radio-button label="消耗品"></el-radio-button>
            <el-radio-button label="鱼竿"></el-radio-button>
            <el-radio-button label="乐器"></el-radio-button>
            <el-radio-button label="对抗灌注符"></el-radio-button>
            <el-radio-button label="秘境灌注符"></el-radio-button>
          </el-radio-group>
        </div>
        <el-table :data="tableData" border>
          <el-table-column label="名称" prop="life_name" min-width="300" align="center"></el-table-column>
          <el-table-column label="所需材料价值" prop="cost" min-width="200" align="center"></el-table-column>
          <el-table-column label="市场价" prop="price" min-width="200" align="center"></el-table-column>
          <el-table-column label="利润" prop="profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.profit > 2000" type="success">{{scope.row.profit}}</el-tag>
              <el-tag v-else-if="scope.row.profit >= 0" type="info">{{scope.row.profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="净利润（扣除5%后）" prop="net_profit" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.net_profit > 2000" type="success">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else-if="scope.row.net_profit >= 0" type="info">{{scope.row.net_profit}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.net_profit}}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="每元气值利润" prop="rate" min-width="200" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.rate > 2000" type="success">{{scope.row.rate}}</el-tag>
              <el-tag v-else-if="scope.row.rate >= 0" type="info">{{scope.row.rate}}</el-tag>
              <el-tag v-else type="danger">{{scope.row.rate}}</el-tag>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination layout="prev, pager, next" :current-page="params.page" :page-size="params.rows"
                       :page-count="6"
                       :total="total" @current-change="searchPage"></el-pagination>
      </el-tab-pane>
    </el-tabs>

  </el-card>
</template>

<script>
    import api from '../../../utils/api';

    export default {
        name: "TradeHouseHistory",
        data() {
            return {
                historyNoList: [],

                activeName: 'forge',// forge-锻造 sew-缝纫 alchemy-炼药 cooking-烹饪 engrave-雕刻
                sortType: '默认正序',// 1-默认正序 2-净利润倒序 3-所需材料价值倒序 4-市场价倒序 5-每元气值利润倒序

                radio1: '全部',
                radio2: '全部',
                radio3: '全部',
                radio4: '全部',
                radio5: '全部',
                params: {
                    history_no: null,
                    rows: 15,
                    page: 1,
                    type: 1,// 1-锻造 2-缝纫 3-炼药 4-烹饪 5-雕刻
                    keyword: '',
                    sort_type: 1
                },
                total: 0,
                tableData: [],
            }
        },
        methods: {
            changeSortType(val) {
                if (val == '默认正序') {
                    this.params.sort_type = 1;
                } else if (val == '净利润倒序') {
                    this.params.sort_type = 2;
                } else if (val == '所需材料价值倒序') {
                    this.params.sort_type = 3;
                } else if (val == '市场价倒序') {
                    this.params.sort_type = 4;
                } else if (val == '每元气值利润倒序') {
                    this.params.sort_type = 5;
                }
                this.search();
            },
            changeRadio(val) {
                if (val == '全部') {
                    this.params.keyword = '';
                } else {
                    this.params.keyword = val;
                }
                this.search();
            },
            // 切换生活tab
            handleClick(tab) {
                this.activeName = tab.name;
                if (this.activeName == 'forge') {
                    this.params.type = 1;
                    this.radio1 = '全部';
                    this.tabTypeList = [
                        {label: '青云门武器', value: '青云门武器'},
                        {label: '鬼王宗武器', value: '鬼王宗武器'},
                        {label: '合欢派武器', value: '合欢派武器'},
                        {label: '焚香谷武器', value: '焚香谷武器'},
                        {label: '灵汐阁武器', value: '灵汐阁武器'},
                        {label: '鬼王宗头脚上手腰', value: '鬼王宗头脚上手腰'},
                        {label: '合欢派头脚上手腰', value: '合欢派头脚上手腰'},
                        {label: '礼物', value: '礼物'},
                        {label: '消耗品', value: '消耗品'}
                    ]
                } else if (this.activeName == 'sew') {
                    this.params.type = 2;
                    this.radio2 = '全部';
                    this.tabTypeList = [
                        {label: '包裹', value: '包裹'},
                        {label: '青云门头脚上手腰', value: '青云门头脚上手腰'},
                        {label: '焚香谷头脚上手腰', value: '焚香谷头脚上手腰'},
                        {label: '灵汐阁头脚上手腰', value: '灵汐阁头脚上手腰'},
                        {label: '礼物', value: '礼物'},
                        {label: '消耗品', value: '消耗品'}
                    ]
                } else if (this.activeName == 'alchemy') {
                    this.params.type = 3;
                    this.radio3 = '全部';
                    this.tabTypeList = [
                        {label: '丹药', value: '丹药'},
                        {label: '灵药', value: '灵药'},
                        {label: '礼物', value: '礼物'}
                    ]
                } else if (this.activeName == 'cooking') {
                    this.params.type = 4;
                    this.radio4 = '全部';
                    this.tabTypeList = [
                        {label: '烹饪', value: '烹饪'},
                        {label: '礼物', value: '礼物'},
                        {label: '帮派相关', value: '帮派相关'}
                    ]
                } else if (this.activeName == 'engrave') {
                    this.params.type = 5;
                    this.radio5 = '全部';
                    this.tabTypeList = [
                        {label: '护符', value: '护符'},
                        {label: '法印', value: '法印'},
                        {label: '令牌', value: '令牌'},
                        {label: '礼物', value: '礼物'},
                        {label: '消耗品', value: '消耗品'},
                        {label: '鱼竿', value: '鱼竿'},
                        {label: '乐器', value: '乐器'},
                        {label: '对抗灌注符', value: '对抗灌注符'},
                        {label: '秘境灌注符', value: '秘境灌注符'}
                    ]
                }
                this.params.keyword = '';
                this.search();
            },

            search() {
                this.params.page = 1;
                this.searchPage(1);
            },
            searchPage(page) {
                var that = this;
                that.params.page = page;
                api.ajax.get('/life/monitor/history/page/' + that.params.history_no + '/' + that.params.rows + '/' + that.params.page + '?type=' + that.params.type + '&keyword=' + that.params.keyword + '&sortType=' + that.params.sort_type).then((result) => {
                    var data = result.data;
                    that.tableData = data.list;
                    that.total = data.total;
                }, function (result) {
                    that.$alert("获取分析列表异常", '失败!');
                })
            },
            getHistoryNos() {
                var that = this;
                api.ajax.get('/life/monitor/history/get/list').then((result) => {
                    that.historyNoList = [];
                    var data = result.data;
                    for (let item in data) {
                        that.historyNoList.push({
                            label: data[item],
                            value: data[item]
                        });
                    }
                    that.params.history_no = that.historyNoList[0].value;
                    that.search();
                }, function (result) {
                    that.$alert("获取档案号列表异常", '失败!');
                })
            },
        },
        activated() {
            this.getHistoryNos();
        },
    }
</script>

<style scoped>

</style>
